<template>
  <div class="home">
    <div class="home_background"></div>
    <div class="login_content">
      <div class="contitle">易知后台管理</div>
      <!-- 登录 -->
      <div class="contform">
        <el-form ref="form" :model="form">
          <el-tabs v-model="activeName">
            <!-- <el-tab-pane label="验证码登录" name="first">
              <el-form-item style="margin-top: 20px">
                <el-input
                  v-model="form.dlphone"
                  placeholder="请输入您的手机号"
                ></el-input>
              </el-form-item>

              <div class="codecot">
                <el-form-item class="code_el">
                  <el-input v-model="form.dlcode" placeholder="请输入验证码"></el-input>
                </el-form-item>

                <el-button
                  v-if="sendSmsstatusdl"
                  @click="registerSmsdl(60)"
                  :loading="Loading"
                  class="codebtn"
                  plain
                  >获取验证码</el-button
                >
                <el-button v-if="!sendSmsstatusdl" disabled class="codebtn" plain
                  >{{ sendSmsSeconddl }}s后重新发送</el-button
                >
              </div>

              <el-button class="registerbtn" type="primary" @click="registerlogon"
                >登录</el-button
              >
            </el-tab-pane> -->
            <el-tab-pane label="密码登录" name="first">
              <el-form-item style="margin-top: 20px">
                <el-input
                  v-model="form.mmdlphone"
                  placeholder="请输入您的手机号"
                ></el-input>
              </el-form-item>

              <el-form-item style="margin-top: 42px">
                <el-input
                  v-model="form.mmdlpassword"
                  show-password
                  placeholder="请输入您的密码"
                ></el-input>
              </el-form-item>

              <el-button class="registerbtn" @click="passwordlogon()" type="primary"
                >登录</el-button
              >
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import config from "@/baseconfig.js";
import md5 from "js-md5";
export default {
  name: "Home",
  components: {},
  data() {
    return {
      activeName: "first",
      Loading: false,
      submitLoading: false,
      // 登录
      sendSmsstatusdl: true, //发送验证码按钮状态
      sendSmsSeconddl: "", //点击按钮之后，倒计时60秒
      timerdl: null, //倒计时
      form: {
        invitationCode: "84298", //企业验证码
        dlphone: "", //登录手机号
        dlcode: "", //登录验证码
        mmdlpassword: "", //密码登录密码
        mmdlphone: "", //密码登录手机号
      },
    };
  },
  computed: {},
  mounted() {},
  created() {},
  methods: {
    //登录发送验证码
    registerSmsdl(TIME_COUNT) {
      if (this.form.dlphone == "") {
        this.$message({ showClose: true, message: "请完善手机号", type: "error" });
      } else if (this.form.dlphone == "" || this.form.dlphone.length != 11) {
        this.$message.error("手机号不正确，请输入完整！");
      } else {
        this.setCountDowndl(TIME_COUNT);
        //发送号码到后台，进行短信发送
        this.$api
          .post("/auth/verify/code/send", {
            phoneNumber: this.form.dlphone,
          })
          .then((res) => {
            // console.log(res)
            // if (result.data.code === 1000) {
            //   this.$message({
            //     message: '验证码发送成功，请注意查看',
            //     type: 'success'
            //   });
            // }
          });
      }
    },
    //登录设置倒计时60，禁止提交
    setCountDowndl(TIME_COUNT) {
      var millisecond = new Date().getTime();
      var expiresTime = new Date(millisecond + 60 * 1000);
      if (!this.timer) {
        this.sendSmsSeconddl = TIME_COUNT;
        this.sendSmsstatusdl = false;
        this.timerdl = setInterval(() => {
          if (this.sendSmsSeconddl > 0 && this.sendSmsSeconddl <= TIME_COUNT) {
            this.sendSmsSeconddl--;
          } else {
            this.sendSmsstatusdl = true;
            clearInterval(this.timerdl);
            this.timerdl = null;
          }
        }, 1000);
      }
    },
    // 验证码登录
    registerlogon() {
      let that = this;
      if (that.form.dlphone != '' && that.form.dlcode != '') {
        that.submitLoading = true;
        that.$api.post('/corp/admin/login', {
          phoneNumber: that.form.dlphone,
          invitationCode: that.form.invitationCode,
          password: that.form.dlcode,
          loginType: 'code',
        }).then(res => {
          that.submitLoading = false;
          // that.$api.post('/corp/admin/login', {}).then(res => {
          //   console.log(res)
          //   this.$store.commit("login", res);
          //   console.log("保存成功")
          // })
          that.$router.push({name:'Chat',params:{id:1}})
          // that.$router.push({ name: 'index', });
        })
      } else {
        this.$message({ showClose: true, message: '请完善手机号和验证码', type: 'error' });
      }
    },
    // 密码登录
    passwordlogon() {
      let that = this;
      if (that.form.mmdlphone != '' && that.form.mmdlpassword != '') {
        that.submitLoading = true;
        that.$api.post('/corp/admin/login', {
          phoneNumber: that.form.mmdlphone,
          password: that.form.mmdlpassword,
          loginType: 'password ',
        }).then(res => {
          that.submitLoading = false;
          // that.$api.post('/account/info', {}).then(res => {
          //   console.log(res)
          //   this.$store.commit("login", res);
          //   console.log("保存成功")
          // })
          that.$router.push({name:'Chat',params:{id:1}})
          // that.$router.push({ name: 'index', });

        }).catch((e) => {
          // console.log(e.data.code)
          // if (e.data.code==1000) {
          //   that.submitLoading = false;
          //   that.$api.post('/account/info', {}).then(res => {
          //   })
          //   that.$router.push({ name: 'index', });
          // }
        })
      } else {
        this.$message({ showClose: true, message: '请完善手机号和密码', type: 'error' });
      }
    },
  },
};
</script>
<style lang="stylus" scoped>
.home
  display flex
  flex-direction column
  align-items center
  justify-content center
  min-height calc(70vh - 0px) !important
  .home_background
    position:absolute
    top 0
    bottom 0
    left 0
    right 0
    background-size cover
    background-position center
    background-repeat no-repeat
    background-image url('~@/assets/icon/bg_login.png')
  
  >>>.el-card__body
    padding 0px 20px
    position absolute
    top 0
    right 0
    left 0
    display flex
    align-items center
    background #fff
    opacity 0.7

  .tips
      line-height 50px
      color #606266
      font-weight bold

  .home_login_content
    position: relative

    .login_form
      margin 0 auto
      padding 20px 30px 20px 30px
      background-color rgba(255, 255, 255, 0.9)
      border-radius 20px
      max-width 940px
      .login_main
        width 390px
        padding 0 30px 0 20px
        box-sizing border-box
        .code_info
          position absolute
          right 0
          top 0
        .login_title
          font-size 26px
          color $colorDeepPrimary
          text-align center
          padding 10px 0
          margin-bottom 20px
        /deep/ .el-button
          display block
          width 100%
          margin 8px 0
        .link
          display block
          text-align center
          height $titleSize
          line-height $titleSize
          color $colorBle
          padding 3px
          background none
          border 0
      .login_meg
        width 500px
        .login_title
          font-size 26px
          color $colorDeepPrimary
          text-align center
          padding 10px 0
      .notice_items
        .notice
          padding 10px
          display flex
          cursor pointer
          .date
            width 48px
            margin-right 10px
            display flex
            flex-direction column
            justify-content center
            span
              display block
              padding 5px 0
            .month
              color $yellow
              font-size $normalSize
              text-align center
            .day
              background-color $yellow
              color $white
              text-align center
              padding 3px 0
          .main
            flex 1
            width 0
            .title
              color $darkblack
              font-weight bold
              padding 5px 0 10px
              overflow hidden
              text-overflow ellipsis
              white-space nowrap
            .word
              color $gray
              overflow hidden
              text-overflow ellipsis
              display -webkit-box
              -webkit-box-orient vertical
              -webkit-line-clamp 2
>>>.el-dialog__header
  padding 0
>>>.el-dialog__body
  padding 15px 20px
.login_tips_alert
  font-size 16px
  margin-bottom 15px
  span
    font-size 14px
.login_content{
      z-index: 1;
      width: 400px;
      height: 450px;
      padding: 30px 50px;
      background: #fff;
      border-radius: 15px;
      position: relative;
      overflow: hidden;
}
.switch{
    background:#0091FF;
    width: 140px;
    height: 140px;
    position: absolute;
    right: -71px;
    top: -71px;
    cursor:pointer;
    transform: rotate(45deg);
}
.switchtext{
    position: absolute;
    top: 100px;
    left: 57px;
    transform: rotate(-45deg);
    color: #fff;
}
.contitle{
  font-size:20px;
  font-weight:600;
  margin-bottom: 50px;
}
>>>.el-tabs__nav-wrap is-top{
  width:240px;
}
>>>.el-tabs__nav-wrap::after{
  background-color:#fff !important;
}
.form_code{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.passinput{
  margin-top: 20px;
  width: 250px;
}
.codebtn{
  height: 40px;
  width: 130px;
  color:#C0C7DA
}
.registerbtn{
  width: 100%;
  margin-top: 50px;
  height: 50px;
  font-size:16px
}
.codecot{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.code_el{
  margin-top: 20px;
  width: 250px;
}
</style>
